/*circle-progress js*/
function filterFn(){
    (function($) {
    function CircleProgress(config) {
        this.init(config);
    }

    CircleProgress.prototype = {
        value: 0.0,
        size: 155.0,
        thickness: 'auto',
        fill: {
            gradient: ['#3aeabb', '#fdd250']
        },
        emptyFill: '#575757',
        animation: {
            duration: 1200,
            easing: 'circleProgressEasing'
        },
        animationStartValue: 0.0,
        reverse: false,
        lineCap: 'butt',
        constructor: CircleProgress,
        el: null,
        canvas: null,
        ctx: null,
        radius: 0.0,
        arcFill: null,
        lastFrameValue: 0.0,
        init: function(config) {
            $.extend(this, config);
            this.radius = this.size / 2;
            this.initWidget();
            this.initFill();
            this.draw();
        },
        initWidget: function() {
            var canvas = this.canvas = this.canvas || $('<canvas>').prependTo(this.el)[0];
            canvas.width = this.size;
            canvas.height = this.size;
            this.ctx = canvas.getContext('2d');
        },
        initFill: function() {
            var self = this,
                fill = this.fill,
                ctx = this.ctx,
                size = this.size;

            if (!fill)
                throw Error("The fill is not specified!");

            if (fill.color)
                this.arcFill = fill.color;

            if (fill.gradient) {
                var gr = fill.gradient;

                if (gr.length == 1) {
                    this.arcFill = gr[0];
                } else if (gr.length > 1) {
                    var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default
                        gd = fill.gradientDirection || [
                            size / 2 * (1 - Math.cos(ga)), // x0
                            size / 2 * (1 + Math.sin(ga)), // y0
                            size / 2 * (1 + Math.cos(ga)), // x1
                            size / 2 * (1 - Math.sin(ga))  // y1
                        ];

                    var lg = ctx.createLinearGradient.apply(ctx, gd);

                    for (var i = 0; i < gr.length; i++) {
                        var color = gr[i],
                            pos = i / (gr.length - 1);

                        if ($.isArray(color)) {
                            pos = color[1];
                            color = color[0];
                        }

                        lg.addColorStop(pos, color);
                    }

                    this.arcFill = lg;
                }
            }
            function setImageFill() {
                var bg = $('<canvas>')[0];
                bg.width = self.size;
                bg.height = self.size;
                bg.getContext('2d').drawImage(img, 0, 0, size, size);
                self.arcFill = self.ctx.createPattern(bg, 'no-repeat');
                self.drawFrame(self.lastFrameValue);
            }
        },

        draw: function() {
            if (this.animation)
                this.drawAnimated(this.value);
            else
                this.drawFrame(this.value);
        },
        drawFrame: function(v) {
            this.lastFrameValue = v;
            this.ctx.clearRect(0, 0, this.size, this.size);
            this.drawEmptyArc(v);
            this.drawArc(v);
        },
        drawArc: function(v) {
            var ctx = this.ctx,
                r = this.radius,
                t = this.getThickness(),
                a = this.startAngle;

            ctx.save();
            ctx.beginPath();

            if (!this.reverse) {
                ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
            } else {
                ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
            }

            ctx.lineWidth = t;
            ctx.lineCap = this.lineCap;
            ctx.strokeStyle = this.arcFill;
            ctx.stroke();
            ctx.restore();
        },
        drawEmptyArc: function(v) {
            var ctx = this.ctx,
                r = this.radius,
                t = this.getThickness(),
                a = this.startAngle;

            if (v < 1) {
                ctx.save();
                ctx.beginPath();

                if (v <= 0) {
                    ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
                } else {
                    if (!this.reverse) {
                        ctx.arc(r, r, r - t / 2, a + Math.PI * v, a);
                    } else {
                        ctx.arc(r, r, r - t / 2, a, a - Math.PI * v);
                    }
                }

                ctx.lineWidth = t;
                ctx.strokeStyle = this.emptyFill;
                ctx.stroke();
                ctx.restore();
            }
        },
        drawAnimated: function(v) {
            var self = this,
                el = this.el;

            el.trigger('circle-animation-start');

            $(this.canvas)
                .stop(true, true)
                .css({ animationProgress: 0 })
                .animate({ animationProgress: 1 }, $.extend({}, this.animation, {
                    step: function(animationProgress) {
                        var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
                        self.drawFrame(stepValue);
                        el.trigger('circle-animation-progress', [animationProgress, stepValue]);
                    },
                    complete: function() {
                        el.trigger('circle-animation-end');
                    }
                }));
        },
        getThickness: function() {
            return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;
        }
    };

    $.circleProgress = {
        // Default options (you may override them)
        defaults: CircleProgress.prototype
    };

    // ease-in-out-cubic
    $.easing.circleProgressEasing = function(x, t, b, c, d) {
        if ((t /= d / 2) < 1)
            return c / 2 * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t + 2) + b;
    };

    $.fn.circleProgress = function(config) {
        var dataName = 'circle-progress';

        if (config == 'widget') {
            var data = this.data(dataName);
            return data && data.canvas;
        }

        return this.each(function() {
            var el = $(this),
                instance = el.data(dataName),
                cfg = $.isPlainObject(config) ? config : {};

            if (instance) {
                instance.init(cfg);
            } else {
                cfg.el = el;
                instance = new CircleProgress(cfg);
                el.data(dataName, instance);
            }
        });
    };
})(jQuery);

/*滤芯实例 */
    var percent_1 = $(".percent1").val();
    var percent_2 = $(".percent2").val();
    var percent_3 = $(".percent3").val();
    var percent_4 = $(".percent4").val();
    //滤芯1
    $('.first.circle').circleProgress({
        value:percent_1/100,
        startAngle: -Math.PI/3,
        lineCap: 'round',
        fill: { color: '#3099C6' }
        }).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(percent_1 * progress) + '<i>%</i>');
        });
        //滤芯2
        $('.second.circle').circleProgress({
            value:percent_2/100,
            startAngle: -Math.PI/3,
            lineCap: 'round',
            fill: { color: '#D99C40' }
        }).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(percent_2 * progress) + '<i>%</i>');
        });
        //滤芯3
        $('.third.circle').circleProgress({
            value: percent_3/100,
            startAngle: -Math.PI/3,
            lineCap: 'round',
            fill: { color: '#D45B30' }
        }).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(percent_3 * progress) + '<i>%</i>');
        });
        //滤芯4
        $('.forth.circle').circleProgress({
            value:percent_4/100,
            startAngle: -Math.PI/3,
            lineCap: 'round',
            fill: { color: '#81AE43' }
        }).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(percent_4 * progress) + '<i>%</i>');
        });
    }

function hideAll(){//关闭所有
    $(".addWater1").hide();
    $(".addWater2").hide();
    $(".lessWater1").hide();
    $(".lessWater2").hide();
    $(".fillWater1").hide();
    $(".fillWater2").hide();
    $(".service").hide();
    $(".wash").hide();
    $(".shutDown").hide();
    $(".stateTextBox").hide();
    $(".washWhite").hide();
    $(".washGray").hide();
}
function addWater(){//制水1
    hideAll();
    $(".addWater1").show();
    $(".addWater2").show();
    $(".stateTextBox").show();
    $(".washWhite").show();
    $(".stateText").html("制水");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
}
function lessWater(){//缺水2
    hideAll();
    $(".lessWater1").show();
    $(".lessWater2").show();
    $(".stateTextBox").show();
    $(".stateText").html("缺水");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
}
function standby(){//待机3
    hideAll();
    $(".fillWater1").show();
    $(".fillWater2").show();
    $(".stateTextBox").show();
    $(".stateText").html("水满");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
}
function service(){//检修4
    hideAll();
    $(".service").show();
    $(".stateTextBox").show();
    $(".stateText").html("检修");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
}
function wash(){//冲洗5
    hideAll();
    $(".wash").show();
    $(".stateTextBox").show();
    $(".stateText").html("冲洗");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("取消冲洗");
    $(".washWhite").show();
    $(".washBtn").css("backgroundColor","#9794FF")
    $(".washBtnText").css("color","#fff");
}
function shutDown(){//关机7
    hideAll();
    $(".shutDown").show();
    $(".washGray").show();
    $(".stateText").html("已关机");
    $(".powerOffText").html("开机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washGray").show();
    $(".washBtnText").css("color","#444348");
    
}
function  leak(){//漏水8
    hideAll();
    $(".stateText").html("漏水");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
}
function fillWater(){//水满9
    hideAll();
    $(".fillWater1").show();
    $(".fillWater2").show();
    $(".stateTextBox").show();
    $(".stateText").html("水满");
    $(".powerOffText").html("关机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
}
function offLine(){//离线
    hideAll();
    $(".stateTextBox").show();
    $(".stateText").html("离线");
    $(".powerOffText").html("开机");
    $(".washBtnText").html("冲洗");
    $(".washBtn").css("backgroundColor","rgba(255,255,255,.1)");
    $(".washWhite").show();
    $(".washBtnText").css("color","#fff");
    $(".phNum").html("-.-");
    $("strong").html("0%");
}

window.onload=function(){
    //刷新页面显示当前状态
    var decStatus=$(".decStatus").val();
    if(decStatus==1){//制水
        addWater();
    }else if(decStatus==2){//缺水
        lessWater();
    }else if(decStatus==3){//待机
        standby();
    }else if(decStatus==4){//检修
        service();
    }else if(decStatus==5){//冲洗
        wash();
    }else if(decStatus==7){//关机
        shutDown();
    }else if(decStatus==8){//漏水
        leak ();
    }else if(decStatus==9){//水满
        fillWater();
    }
    //配网
    wx.config({
        beta:true,
        debug:false,
        appId:$('.appId_val').val(),
        timestamp:$('.timestamp_val').val(),
        nonceStr:$('.nonceStr_val').val(),
        signature:$('.signature_val').val(),
        jsApiList:['configWXDeviceWiFi']
    });
    //右上角按钮
    $(".setUp").click(function(){
        wx.ready(function(){
            wx.invoke('configWXDeviceWiFi',{
            },function(res){
                switch (res.err_msg){
                    case 'configWXDeviceWiFi:ok':
                        hint('配置成功');
                        break;
                    case 'configWXDeviceWiFi:fail':
                        hint('超时');
                        break;
                    case 'configWXDeviceWiFi:cancel':
                        hint('用户取消');
                        break;
                    default:
                        hint("res.err_msg:\n" + res.err_msg + "\nres.desc:" + res.desc);
                }
            });
        });
    }) 

    $(".powerOffBtn").click(function(){
        var val = $(".powerOffText").html();
        if(val=="关机"){
            var command ="power_off";
        }else{
            var command = "power_on";
        }
        $.ajax({
            url:"/api/device/control",
            type:"post",
            dataType:"json",
            data:{command:command},
            success:function(data){
                if(data.status.errCode == 0){

                }else if(data.status.errCode == 20005){//没有绑定水机
                    window.location.href = "/device/connect";
                }else if(data.status.errCode==20002){//设备离线
                    hint(data.status.message);
                    offLine();
                }else{
                     hint(data.status.message);
                }
            }
        });
    });
    //点击冲洗按钮
    $('.washBtn').click(function(event){
        if($(".stateText").html()=="缺水"||$(".powerOffText").html()=="开机"||$(".stateText").html()=="检修"||$(".stateText").html()=="漏水")
        {
            event.preventDefault();
        }else{   
            if($(".washBtnText").html() == "冲洗"){
                var command = "wash";
            }else{
                var command = "wash_cancel"; 
            }
            $.ajax({
                url:"/api/device/control",
                type:"post",
                dataType:"json",
                data:{command:command},
                success:function(data){
                    if(data.status['errCode'] == 0){
                    }else if(data.status.errCode == 20005){//没有绑定水机
                        window.location.href = "/device/connect";
                    }else if(data.status.errCode==20002){//设备离线
                        offLine();
                        hint(data.status.message);
                    }else{
                        hint(data.status.message);
                    }
                }
            });
        }
    });
    // 滤芯弹框
    $(".circle").click(function(){
        var _this=$(this).index();
        $(".topBg").hide();
        $(".filter").show();
        $(".ulBox li").show();
        $(".filterBox").animate({left:-$(this).index()*(14.5)+"rem"},500,"linear");
        $(".ulBox li").eq($(this).index()).css("backgroundColor","#9695FD").siblings().css("backgroundColor","#656468");
        $(".residueNum").html($(this).children("strong").html());
        $(".callOff").unbind('click').click(function(){
            $(".topBg").show();
            $(".filter").hide();
            $(".ulBox li").hide();
        });
        // 复位
        $(".reset").unbind('click').click(function(){
            $(".undbing_bg").show();
            $(".undbing_bg").height($(window).height());
            $(".no_btn").unbind('click').click(function(){
                $(".undbing_bg").hide();
            });
            $(".yes_btn").unbind('click').click(function(){
                $.ajax({
                    url:"/api/device/control",
                    type:"post",
                    dataType:"json",
                    data:{
                        command:"reset_filter",
                        num:_this
                    },
                    success:function(data){
                        $(".topBg").show();
                        $(".filter").hide();
                        $(".ulBox li").hide();
                        $(".undbing_bg").hide();
                        if(data.status.errCode == 0){
                            hint("操作成功！");
                        }else
                        {   
                            hint("操作失败，请重新操作或联系售后人员！");
                        }
                    }
                });
            });
        })
    });
}